<style>
#ruleModal .modal-body {
	max-height: 300px;
}

</style>
<script type="text/javascript">
window.operateEvents = {
        'click .like': function (e, value, row, index) {
        	 $("#mycatRule-form [name='guid']").val(row.name);
        	 loadFormData("mycatRule-form",JSON.stringify(row));
        	 $("#myModalLabel").text("编辑rule");
           	 $("#ruleModal form [name='name']").attr("disabled",true);
        	 destroyValidator("mycatRule-form");
        	 validator();
        	 showModal("ruleModal");
        },
        'click .remove': function (e, value, row, index) {
        	var data = {
        			 "guid" :row.name,
        			 "zkId" : zkId
        	};
        	if(confirm("确定要删除数据吗")){
        		deleteRow ('ruleService','delete',data,callback);
        	}
        }
};
var columns = [
			{
				title : '规则名称',
				field:'name',
				width:200,
				align:'center'
			},
			{
				title : '规则对应类名',
				field : 'functionName',
				width:360,
				align:'center'

			},
			{
				title : '规则对应算法名称',
				field : 'column',
				width:100,
				align:'center'

			},
			{
				title : '默认分片节点',
				field : 'defaultNode',
				width:100,
				align:'center'

			},{
                title: '操作',
                align: 'center',
                events: operateEvents,
                formatter: operateFormatter
            }];

function validator(){
	$('#mycatRule-form').bootstrapValidator({
	    message: 'This value is not valid',
	    feedbackIcons: {
	        validating: 'glyphicon glyphicon-refresh'
	    },
	    err : {
			container : 'tooltip'
		},
	    fields: {
	        name: {
	            validators: {
	                notEmpty: {
	                    message: '请输入分片规则名称'
	                }
	
	            }
	        },
	        functionName: {
	            validators: {
	                notEmpty: {
	                    message: '请输入分片类路径'
	                }
	            }
	        },
	        column: {
	            validators: {
	            	notEmpty: {
	                    message: '请输入分片字段'
	                }
	            }
	        },
	        defaultNode: {
	            validators: {
	            	notEmpty: {
	                    message: '请输入默认值'
	                }
	            }
	        }
	        
	    },
	    onSuccess : function(e,validator, form, submitButton) {
	    	var guid = $("#mycatRule-form [name='guid']").val();
	    	var data = {
	    			 "guid" : guid,
	    			 "zkId" : zkId
	    	}
	    	if(guid){
	    		saveForm('ruleService','update','mycatRule-form',data,callback);
	    	}else{
	    		saveForm('ruleService','insert','mycatRule-form',data,callback);
	    	}
			
		}
	});
}

function operateFormatter(value, row, index) {
    return [
        '<a class="like" href="javascript:void(0)" title="Edit">',
        '<i class="glyphicon glyphicon-pencil"></i>',
        '</a>  ',
        '<a class="remove" href="javascript:void(0)" title="Remove">',
        '<i class="glyphicon glyphicon-remove"></i>',
        '</a>'
    ].join('');
};

function loadMapFileCofig(guid){
	   var rainbow = new Rainbow();
	   var data = {
			"zkId": zkId,
			"guid": guid
		};
		rainbow.setService("ruleMapFileConfigService");
		rainbow.setMethod("query");
		rainbow.setAttr(data);
		rainbow.addRows(data);
		jQuery.ajax({
			cache : false,
			type : 'POST',
			dataType : "json",
			async: false,  //必须设置为同步请求
			url : './dispatcherAction/execute.do',
			data: $.parseJSON(JSON.stringify(rainbow)),
			error : function() {//请求失败处理函数
				alert('请求失败');
			},
			success : function(response) { //请求成功后处理函数。 
				if(response.success == true ){
					var json = response.rows[0].configJson;
					if(response.rows!=""){
						html ="<p>"
						var jsonStr = response.rows[0].configJson;
						 var obj = eval("("+jsonStr+")");
						 for(key in obj){
							 html+= key +":" + obj[key] +"<br>"
						 }
						 html +"</p>";
						 return html;
					}
					
				}else{
					alert('加载失败！');
				}
			}
		});
		
		return html;
	}
	
function detailFormatter(index, row) {
	
	return loadMapFileCofig(row.name);
}

function addRule(){
	 $("#mycatRule-form :reset").click();
	 $("#mycatRule-form [name='guid']").val("");
	 $("#myModalLabel").text("添加rule");
   	 $("#ruleModal form [name='name']").attr("disabled",false);
	 destroyValidator("mycatRule-form");
	 validator();
	 showModal('ruleModal');
	
}

function submit(){
	$("#mycatRule-form" ).submit();
}

function callback(){
	$('#ruleModal').modal('hide');
	$('#myclusterRulebody').bootstrapTable('refresh');
	 
}

function getdatagrid(){
	var url = './dispatcherAction/query.do?service=ruleService&method=queryByPage&zkId='+zkId;
	datagrid('myclusterRulebody',url,columns);
}
$(document).ready(function() {
	getdatagrid();
});

</script>
		
<div class="box-body">
  <div id="ruleToolbar">
       <button id="add" class="btn btn-default" onclick="addRule()" >
           <i class="glyphicon glyphicon-plus"></i> 新增规则
       </button>
  </div>
  <table id="myclusterRulebody"  data-toolbar="#ruleToolbar" data-toggle="table" class="table table-striped table-bordered table-hover"
  	data-id-field="name" 	
  	data-detail-view="true" 
  	data-detail-formatter="detailFormatter"
  >
  </table>
</div>
 	<!-- 模态框（Modal） -->
	<div class="modal fade" id="ruleModal" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog modal-md "style="withd:auto">
	      <div class="modal-content"  >
	         <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" 
	               aria-hidden="true">×
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	        	      编辑datanode
	            </h4>
	         </div>
	         <div class="modal-body">
	         <form class="form-horizontal" role="form" id="mycatRule-form" method="post" >
	         
	          	<input type="hidden" id="guid" name="guid">
	          	<button type="reset" id="reset" style="display:none"></button>
			   <div class="form-group">
			   		<label for="name"  class=" col-md-2  control-label" title="规则名称"  data-toggle="tooltip"  data-placement="right"  > name </label>
			   		<div class="col-md-4 ">
			         <input type="text" class="form-control" id="name"  name="name" placeholder="请输入规则名称">
			        </div>
			   </div>
			   <div class="form-group">
			   		<label for="functionName"  class=" col-md-2  control-label" title="分片规则类名"  data-toggle="tooltip"  data-placement="right"  > functionName </label>
			   		<div class="col-md-4 ">
			         <input type="text" class="form-control" id="functionName"  name="functionName" placeholder="请输入分片规则对应类">
			        </div>
			   </div>
			   <div class="form-group">
			   		<label for="column"  class=" col-md-2  control-label" title="分片键"  data-toggle="tooltip"  data-placement="right"  > column </label>
			   		<div class="col-md-4 ">
			         <input type="text" class="form-control" id="column"  name="column" placeholder="请输入分片键">
			        </div>
			   </div>
			   
			    <div class="form-group">
			   		<label for="defaultNode"  class=" col-md-2  control-label" title="默认分片规则"  data-toggle="tooltip"  data-placement="right"  > defaultNode </label>
			   		<div class="col-md-4 ">
			         <input type="text" class="form-control" id="defaultNode"  name="defaultNode" placeholder="请输入默认分片">
			        </div>
			   </div>
			  
			</form>
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">关闭
	            </button>
	            <button type="button" class="btn btn-primary" onclick="submit()">
	             	  保存
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
	   </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

